<template>
  <div>
    <van-nav-bar title="萌宠分类"></van-nav-bar>
    <div class="user-info">
      <van-image round src="https://gd-hbimg.huaban.com/a03ef52d7d1994c7b834d92a700034450ceeed1817c08-pMtbof_fw658" />
      <p>{{ username }}</p>
    </div>
    <div class="Popup">
      <van-cell is-link icon="records-o " @click="showPopup">修改用户密码</van-cell>

      <van-popup round v-model="show" closeable close-icon="close">
        <div class="content">
          <van-form @submit="onEnroll">
            <van-field v-model="password1" :type="passwordType" name="现在密码" label="现在密码：" placeholder="现在密码"
              :rules="[{ pattern: /^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/, message: '请填写现在密码' }]">
              <template slot="right-icon">
                <span class="solts" @click="switchPasswordType">
                  <van-icon name="closed-eye" v-if="passwordType === 'password'" />
                  <van-icon name="eye-o" v-else />
                </span>
              </template>
            </van-field>
            <van-field v-model="password2" :type="passwordType" name="修改密码" label="修改密码：" placeholder="修改密码"
              :rules="[{ pattern: /^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/, message: '请填写修改密码' }]">
              <template slot="right-icon">
                <span class="solts" @click="switchPasswordType">
                  <van-icon name="closed-eye" v-if="passwordType === 'password'" />
                  <van-icon name="eye-o" v-else />
                </span>
              </template>
            </van-field>
            <van-field v-model="password3" :type="passwordType" name="确认密码" label="确认密码：" placeholder="确认密码"
              :rules="[{ message: '请确认密码填写' }]">
              <template slot="right-icon">
                <span class="solts" @click="switchPasswordType">
                  <van-icon name="closed-eye" v-if="passwordType === 'password'" />
                  <van-icon name="eye-o" v-else />
                </span>
              </template>
            </van-field>
            <p>注意：(密码至少6位，至少1个大写字母，1个小写字母，1个数字，1个特殊字符)</p>
            <div style="margin: 16px;">
              <van-button round block type="info" native-type="submit">修改密码</van-button>
            </div>
          </van-form>
        </div>
      </van-popup>
      <van-cell is-link icon="miniprogram-o" title="分享好友" @click="showShare = true" />
      <van-share-sheet v-model="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
      <van-dialog v-model="showPoster" :closeOnClickOverlay="true">
        <img
          src="https://picnew11.photophoto.cn/20170906/guanailiulangmaogougongyishiliangxuanchuanhaibao-28382484_1.jpg"
          style="width: 100%;" />
      </van-dialog>
      <van-dialog v-model="showMoney" :closeOnClickOverlay="true">
        <img src="../../assets/img/C379D5C669D863F5D8DCA6653A400A2A.jpg" style="width: 100%;" />
      </van-dialog>
      <van-cell is-link icon="contact-o" title="用户协议" @click="showHome = true" />
      <van-popup v-model="showHome" closeable class="text">
        <h1>小程序用户协议</h1>
        <h2>一、用户总则</h2>
        <ol>
          <li>
            本协议是您与本公司（以下简称“我们”）之间关于您使用我们的小程序（以下简称“本小程序”）所订立的协议。请您在使用本小程序之前，仔细阅读并充分理解本协议各条款，特别是免除或者限制我们的责任、分险分担及争议解决等涉及您重大权益的条款。这些条款可能以加粗字体或其他明显方式提示您重点注意。
          </li>
          <li>您应当具备完全民事行为能力的自然人、法人或其他组织。若您不具备前述主体资格，则您及您的监护人应承担因此而导致的一切后果，且您和您的监护人应使我们免责。</li>
          <li>您使用本小程序，即视为您已阅读并同意接受本协议全部条款的约束，并遵守国家法律法规的规定。如果您不同意本协议的任何内容，或者您所属的国家或地区有相关法律、法规规定禁止使用本小程序，请您立即停止使用本小程序。
          </li>
        </ol>
        <h2>二、账户注册与使用</h2>
        <ol>
          <li>
            您在使用本小程序前需要注册一个账户。在完成注册程序时，您应当提供真实、准确、完整的信息，包括但不限于真实姓名/名称、身份证明、联系方式等。您应确保您的账户密码安全，并对您的账户进行的所有活动和事件承担法律责任。
          </li>
          <li>您理解并同意，我们的小程序仅用于个人、非商业目的的使用。您不得将本小程序用于任何非法或未经我们书面同意的商业用途。</li>
        </ol>
        <h2>三、知识产权</h2>
        <ol>
          <li>本小程序的所有内容，包括但不限于文本、图像、音频、视频等，其知识产权均归属于我们或第三方授权人。您对本小程序的使用不意味着获得了上述内容的所有权或使用权。</li>
          <li>未经我们事先书面同意，您不得复制、传播、展示、分发本小程序及其内容，或将其用于其他任何商业目的。</li>
        </ol>
        <h2>四、免责声明</h2>
        <ol>
          <li>我们不对本小程序提供的具体信息的可靠性、准确性、及时性、完整性作出任何保证。</li>
          <li>您理解并同意，使用本小程序存在互联网固有的风险，包括但不限于服务中断、黑客攻击、病毒等因素可能导致的服务不稳定、数据丢失等风险。我们不承担因上述风险导致的任何损失或损害。</li>
        </ol>
        <h2>五、违约责任</h2>
        <ol>
          <li>如您违反本协议中的任何条款，我们有权采取一切必要措施，包括但不限于限制、冻结或终止您的账户使用，同时要求您赔偿因此给我们造成的损失。</li>
        </ol>
        <h2>六、法律适用与争议解决</h2>
        <ol>
          <li>本协议的签订、履行、解释及争议解决均适用中华人民共和国法律。</li>
          <li>若您与我们之间发生任何争议或纠纷，首先应友好协商解决；协商不成的，您同意将争议提交至我们所在地人民法院诉讼解决。</li>
        </ol>
        <h2>七、其他条款</h2>
        <ol>
          <li>本协议自您点击同意之日起生效。</li>
          <li>我们保留随时修改本协议的权利，并在适当的时候通过公告或其他方式通知您变更内容。您继续使用本小程序即表示您接受该等变更。</li>
          <li>本协议未尽事宜，可另行签订补充协议。补充协议与本协议具有同等法律效力。</li>
        </ol>
        <p>感谢您选择使用我们的小程序，祝您使用愉快！</p>
      </van-popup>
    </div>
    <div class="Button">
      <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" @click="cancel">
        注销账户
      </van-button>
      <van-button color="linear-gradient(60deg, #f78ca0, #f5efef)" @click="signOut">
        退出登录
      </van-button>
    </div>
  </div>
</template>

<script>
import localforage from 'localforage';
import { Dialog } from 'vant';
export default {
  data() {
    return {
      show: false,
      showShare: false,
      showPoster: false,
      showMoney: false,
      showHome: false,
      password1: '',
      password2: '',
      password3: '',
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link', description: '暂未实现' },
        { name: '分享海报', icon: 'poster' },
        { name: '打赏', icon: 'qrcode', description: '制作不易' },
      ],
      passwordType: 'password',
      username: ''
    }
  },
  mounted() {

  },
  created() {
    localforage.getItem('loginStatus').then((status) => {
      if (status === null || status === false) {
        this.$toast({
          message: '您未登录！',
          // icon: '../../assets/maomao.png',
          icon: 'https://imgs.qiubiaoqing.com/qiubiaoqing/imgs/62d45cdc270fbOUI.gif',
          // icon: '@/assets/img/maomao.png',
        });
        this.$router.replace("/Login");
      }

    });
    localforage.getItem('currentUser').then((user) => {
      this.username = user.username; // 将获取到的用户名保存在data中的变量中
    }).catch((err) => {
      console.error("获取当前用户信息失败：" + err);
    });
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    // onEnroll() {
    //   //获取当前用户密码
    //   localforage.getItem('currentUser').then((res) => {
    //     // console.log(res.password);
    //     // console.log(this.password1);
    //     if (res.password !== this.password1) {
    //       this.$toast.fail("请确保现在密码一致！")
    //     }
    //   }).catch((err) => {
    //     // 当出错时，此处代码运行
    //     console.log(err);
    //   });
    //   //修改密码
    //   localforage.getItem('userList').then((res) => {

    //   }).catch((err) => {
    //     // 当出错时，此处代码运行
    //     console.log(err);
    //   });

    // },
    // 修改密码操作
    onEnroll() {
      // 获取当前用户密码
      localforage.getItem('currentUser').then((res) => {
        if (res.password !== this.password1) {
          this.$toast.fail("请确保现在密码正确！")
        } else if (this.password2 !== this.password3) {
          this.$toast.fail("确认密码与修改密码不一致！")
        } else {
          // 现在密码正确，继续修改密码操作
          localforage.getItem('userList').then((users) => {
            // 根据当前用户信息，找到要修改密码的用户对象
            const currentUser = users.find(user => user.username === res.username);
            if (currentUser) {
              // 更新密码
              currentUser.password = this.password2;
              // 保存修改后的用户列表
              localforage.setItem('userList', users).then(() => {
                this.$toast.success("用户列表密码修改成功！")
                // 更新当前用户的密码
                res.password = this.password2;
                // 重新存储更新后的当前用户信息
                localforage.setItem('currentUser', res).then(() => {
                  this.$toast.success("当前用户密码修改成功！")
                }).catch((error) => {
                  this.$toast.fail("当前用户密码修改失败：" + error)
                });
              }).catch((error) => {
                this.$toast.fail("用户列表密码修改失败：" + error)
              });
            } else {
              this.$toast.fail("未找到要修改密码的用户！")
            }
          }).catch((error) => {
            this.$toast.fail("获取用户列表失败：" + error)
          });
        }
      }).catch((err) => {
        this.$toast.fail("获取当前用户信息失败：" + err);
      });
    },

    onSelect(option) {
      if (option.name === '微信') {
        // 执行微信分享操作
        this.$toast("该功能暂未实现")
      } else if (option.name === '微博') {
        // 执行微博分享操作
        this.$toast("该功能暂未实现")
      } else if (option.name === '复制链接') {
        this.$toast("该功能暂未实现")

      } else if (option.name === '分享海报') {
        // 执行分享海报操作
        this.showPoster = true
      } else if (option.name === '打赏') {
        // 执行生成二维码并分享操作
        // this.shareQRCode();
        this.showMoney = true
      }
      this.showShare = false;
    },
    switchPasswordType() {
      this.passwordType = this.passwordType === 'password' ? 'text' : 'password'
    },
    cancel() {
      const self = this;
      function beforeClose(action, done) {
        if (action === 'confirm') {
          // 获取当前用户信息
          localforage.getItem('currentUser').then((currentUser) => {
            // 获取当前用户ID
            const userId = currentUser.id;

            // 获取用户列表
            localforage.getItem('userList').then((userList) => {
              // 找到与当前用户ID相对应的用户信息索引
              const index = userList.findIndex(user => user.id === userId);

              if (index !== -1) {
                // 从用户列表中删除该用户信息
                userList.splice(index, 1);

                // 保存更新后的用户列表
                localforage.setItem('userList', userList).then(() => {
                  // 删除loginStatus数据
                  localforage.removeItem('loginStatus').then(() => {
                    // 在这里执行任何后续操作
                    self.$router.replace("/Enroll");

                  }).catch((error) => {
                    console.error("删除loginStatus数据失败：" + error);
                  });
                }).catch((error) => {
                  console.error("保存用户列表失败：" + error);
                });
              } else {
                console.error("未找到要删除的用户信息");
              }
            }).catch((error) => {
              console.error("获取用户列表失败：" + error);
            });
          }).catch((error) => {
            console.error("获取当前用户信息失败：" + error);
          });
          setTimeout(done, 500);
        } else {
          console.log('执行取消操作');
          setTimeout(done, 500);
          // done();
        }
      }

      Dialog.confirm({
        title: '萌宠百科',
        message: '是否确认注销账户?',
        beforeClose,
      }).catch((err) => {
        console.error('对话框操作被取消', err);
      });
    },

    // cancels() {
    //   // 获取当前用户信息
    //   localforage.getItem('currentUser').then((currentUser) => {
    //     // 获取当前用户ID
    //     const userId = currentUser.id;

    //     // 获取用户列表
    //     localforage.getItem('userList').then((userList) => {
    //       // 找到与当前用户ID相对应的用户信息索引
    //       const index = userList.findIndex(user => user.id === userId);

    //       if (index !== -1) {
    //         // 从用户列表中删除该用户信息
    //         userList.splice(index, 1);

    //         // 保存更新后的用户列表
    //         localforage.setItem('userList', userList).then(() => {
    //           // 删除loginStatus数据
    //           localforage.removeItem('loginStatus').then(() => {
    //             // 在这里执行任何后续操作
    //             this.$router.replace("/Enroll");
    //           }).catch((error) => {
    //             console.error("删除loginStatus数据失败：" + error);
    //           });
    //         }).catch((error) => {
    //           console.error("保存用户列表失败：" + error);
    //         });
    //       } else {
    //         console.error("未找到要删除的用户信息");
    //       }
    //     }).catch((error) => {
    //       console.error("获取用户列表失败：" + error);
    //     });
    //   }).catch((error) => {
    //     console.error("获取当前用户信息失败：" + error);
    //   });
    // },

    signOut() {
      const self = this;

      function beforeClose(action, done) {
        if (action === 'confirm') {
          localforage.removeItem('loginStatus').then(() => {
            // 在这里执行任何后续操作
            self.$router.replace("/Login");
          }).catch((error) => {
            console.error("删除loginStatus数据失败：" + error);
          });
          setTimeout(done, 500);
        } else {
          console.log('执行取消操作');
          setTimeout(done, 500);
          // done();
        }
      }

      Dialog.confirm({
        title: '萌宠百科',
        message: '是否确认退出账户?',
        beforeClose,
      }).catch((err) => {
        console.error('对话框操作被取消', err);
      });
    },


  },

}
</script>

<style scoped>
.van-nav-bar.van-hairline--bottom {
  background-image: linear-gradient(278deg, #fff1eb 0%, #ace0f9 100%);
}

.user-info {
  width: 100%;
  height: 50vw;
  margin-top: 2vw;
  border-radius: 6vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  background-image: linear-gradient(318deg, #a18cd1 0%, #fbc2eb 100%);
}

p {
  font-size: 5vw;
}

.van-image {
  width: 30vw;
  height: 30vw;
  background-color: #ace0f9;
}

.content {
  width: 80vw;
  height: 70vw;
}

form.van-form {
  margin-top: 10vw;
}

.text.van-popup.van-popup--center {
  width: 100%;
  height: 100%;
}

div.Popup {
  margin: 2vw;
}

div.Button {
  margin-top: 2vw;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

button.van-button.van-button--default.van-button--normal {
  border-radius: 3vw;
}
</style>
